<template>
  <div class="loginBox">
    <div class="loginPanel">
      <p class="login-name">
        <img class="login-image" :src="defaultAvatar" alt="" />
        <span>AIGC导航工具</span>
      </p>
      <div class="loginBody">
        <el-form ref="loginForm" :model="form" label-width="0">
          <el-form-item>
            <el-input class="elInput" maxlength="11" v-model="form.nickname" placeholder="请输入您的昵称">
              <template #prefix>
                <img class="prefix_input" :src="Nc" alt="" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input class="elInput" v-model="form.phone" maxLength="11" placeholder="请输入您的手机号">
              <template #prefix>
                <img class="prefix_input" :src="Phone" alt="" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input class="elInput" v-model="form.authToken" placeholder="请输入登录令牌">
              <template #prefix>
                <img class="prefix_input" :src="Yzm" alt="" />
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button class="loginBth" type="primary" :loading="loading" @click="login">确认登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import defaultAvatar from '@/assets/logo-gpt.png';
import { ElMessageBox } from 'element-plus';
import Nc from '@/assets/nc.png';
import Phone from '@/assets/phone.png';
import Yzm from '@/assets/yzm.png';
import { isEmpty } from 'lodash';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/store/modules/app';
const user = useAppStore();

const router = useRouter();
interface LoginArgs {
  nickname: string;
  phone: string;
  authToken: string;
}
const form = reactive<LoginArgs>({
  authToken: 'edkegr',
  phone: '13800000000',
  nickname: 'admin',
});

const validateForm = () => {
  if (isEmpty(form.nickname)) {
    open('昵称不能为空');
    return false;
  }

  if (!validatePhoneNumber(form.phone)) {
    open('手机号不合法');
    return false;
  }

  if (isEmpty(form.authToken)) {
    open('身份令牌不能为空');
    return false;
  }

  return true;
};

const validatePhoneNumber = (phone: string) => {
  const phoneNumberRegex = /^1[0-9]{10}$/;
  return phoneNumberRegex.test(phone);
};

const loading = ref(false);
const login = () => {
  loading.value = true;
  if (!validateForm()) {
    return;
  }
  // 登录
  user.login({
    data: form,
    open,
    success() {
      loading.value = false;
      router.replace('/');
    },
  });
};

const open = (message: any) => {
  loading.value = false;
  ElMessageBox({
    title: '提示',
    message,
    showCancelButton: false,
    confirmButtonText: '确认',
  });
};
</script>

<style lang="scss" scoped>
.loginBox {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/login_bg.png') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-name {
  font-size: 30px;
  font-family: Alibaba PuHuiTi;
  padding: 20px;
  font-weight: 400;
  color: #5a8ffb;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-image {
    width: 60px;
    margin-right: 10px;
  }
}

.loginPanel {
  width: 500px;
  margin-top: 100px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 10px;
}

.loginBody {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.elFormItem {
  display: flex;
  width: 100%;
}

.elInput {
  flex: 1;
  height: 50px;
}

.prefix_input {
  height: 20px;
}

.sendCode {
  height: 50px;
  margin-left: 10px;
  color: #5a8ffb;
}

.loginBth {
  width: 100%;
  height: 50px;
  background: linear-gradient(-89deg, #5aa6fc 0%, #5a8ffc 100%);
  border-radius: 8px;
  margin-top: 20px;
}
</style>
